<template>
    <h2 style="text-align: center;">科室信息展示</h2>
    <a  href="/AddDept" class="btn btn-success">添加科室信息</a><br>
    科室名称:<input type="text" placeholder="请输入科室名称"  v-model="name" style="margin-right: 10px;"/>
    科室介绍:<input type="text" placeholder="请输入科室介绍" v-model="info" style="margin-right: 10px;" />
    创建时间:<input type="date" v-model="Begin" />-<input type="date" v-model="End"  style="margin-right: 10px;"/> 
    <input type="button" value="查询" class="btn btn-success" @click="ShowDept" style="margin-right: 10px;" />
    <input type="button" value="导出" class="btn btn-success" @click="ExprotFpath" style="margin-right: 10px;"/>
    <input type="button" value="导入" class="btn btn-success" @click="ImprotFpath"/>
    <table border="1" class="table table-bordered">
        <thead style="background-color: aquamarine;">
            <tr style="text-align: center;">
                <th>科室编号</th>
                <th>科室名称</th>
                <th>科室人数</th>
                <th>创建时间</th>
                <th>科室介绍</th>
                <th>登录人</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr v-for="item in Info">
                <td>{{ item.Dept_Id}}</td>
                <td>{{ item.Dept_Name }}</td>
                <td>{{ item.Dept_Num}}</td>
                <td>{{ moment(item.Dept_CreateTime).format('YYYY-MM-DD hh-mm-ss')}}</td>
                <td>{{ item.Dept_Info }}</td>
                <td>{{ item.Member_Name }}</td>
                <td>
                    <a  @click="UpdDept(item.Dept_Id)" class="btn btn-success" style="margin-right: 10px;">修改</a>
                    <a @click="DelDept(item.Dept_Id)" class="btn btn-danger">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>



<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import moment from 'moment';
    import { useRouter } from 'vue-router';


    const router=useRouter();
    //显示响应式数据
    const Info=ref([{
        Dept_Id: 1,
        Dept_Name: "",
        Dept_Num: "",
        Dept_CreateTime: "",
        Dept_Info: "",
        Member_Name: ""
    }])

    //文档就绪函数
    onMounted(()=>{
        ShowDept();//显示
    })
    const name=ref("");
    const info=ref("");
    const Begin=ref("");
    const End=ref("");
    //显示
    const ShowDept=()=>{
        axios.get("https://localhost:44306/api/Department/ShowDept",
            {
                params:{
                    name:name.value,
                    info:info.value,
                    Begin:Begin.value,
                    End:End.value
                }
            }
        )
        .then(res=>{
            Info.value=res.data
        })
    }
    //删除
    const DelDept=(Dept_Id:number)=>{
        if(confirm("确定删除?")){
            axios.delete("https://localhost:44306/api/Department/DelDept?id="+Dept_Id)
            .then(res=>{
                if(res.data>0)
                {
                    alert('删除成功');
                    ShowDept();//跳转到显示页面
                }
                else
                {
                    alert('删除失败');
                }
            })
        }
    }
    //修改
    const UpdDept=(Dept_Id:number)=>{
        router.push({
            name:"UpdDept",
            params:{
                id:Dept_Id,
            }
        })
    }
    //导出  "E://桌面/月考复习/第六套/DoctorInfo.xlsx"
    const ExprotFpath=()=>{
        axios.post("https://localhost:44306/api/Department/ExprotFiles?Fpath="+"E://桌面/月考复习/第六套/DeptInfo.xlsx")
        .then(res=>{
            if(res.data>0)
            {
                alert('导出成功');
            }
            else
            {
                alert('导出失败');
            }
        })
    }
    //导入
    const ImprotFpath=()=>{
        axios.post("https://localhost:44306/api/Department/ImprotFiles?Fpath="+"E://桌面/月考复习/第六套/DeptInfo.xlsx")
        .then(res=>{
            if(res.data>0)
            {
                alert('导入成功');
            }
            else
            {
                alert('导入失败');
            }
        })
    }
</script>